<template>
  <div class="app-container">
    <el-main>
      <el-row :gutter="20" type="flex" align="center">
        <el-col>
          <el-button v-permission="'leave_office_add'" type="primary" size="mini" @click.native="showAdd()">离职申请
          </el-button>
        </el-col>
      </el-row>
      <br>

      <el-table
        ref="multipleTable"
        size="mini"
        v-loading="tabLoading"
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        border
        :default-sort="{prop: 'date', order: 'descending'}"
        highlight-current-row
        row-key="id"
      >
        <el-table-column type="index" label="序号" align="center" width="50">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="flow_status" label="流程状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.flow_status == 0" size="mini" type="info">草稿</el-tag>
            <el-tag v-else-if="scope.row.flow_status == 2" size="mini" type="warning">退回</el-tag>
            <el-tag v-else-if="scope.row.flow_status == 3" size="mini">{{ scope.row.flow_current_node_name }}</el-tag>
            <el-tag v-else-if="scope.row.flow_status == 4" size="mini" type="success">通过</el-tag>
            <el-tag v-else-if="scope.row.flow_status == 5" size="mini" type="danger">删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip/>
        <el-table-column prop="dep" label="部门" align="center"/>
        <el-table-column prop="job" label="职位" align="center"/>
        <el-table-column prop="contract_end_at" label="合同截止日期" align="center" show-overflow-tooltip/>
        <el-table-column prop="plan_leave_date" label="拟离职日期" align="center" show-overflow-tooltip/>
        <el-table-column prop="staff_type" label="员工类型" align="center" show-overflow-tooltip>
          <template>
            没有返回名称
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="operation">
              <el-button-group>
                <el-button v-permission="'show_leave_office'" type="primary" icon="el-icon-zoom-in" size="mini"
                           @click.native="viewDetails(scope.row.id)"
                >查看
                </el-button>
              </el-button-group>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

  </div>
</template>

<script>
import { own_list } from '@/api/personnel/leave_office'
import { generateUUID } from '@/utils/util'

export default {
  name: 'LeaveOfficeListMy',
  data() {
    return {
      // list table
      tableData: [], // 列表数据
      tabLoading: true
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 跳转新增
    showAdd() {
      this.$router.push({ name: 'leave_office' })
    },
    viewDetails(id) {
      // const uuid = generateUUID()
      // this.$store.commit('keep/PUT_PAGE_PARAMS', { uuid, data: { id: id } })
      this.$router.push({ name: 'leave_office', params: { id } })
    },
    uploadHandoverSheet() {
      alert('上传离职交接单')
    },
    // 获得table列表
    getList() {
      this.tabLoading = true
      return own_list()
        .then(res => {
          this.tableData = res.data.map(item => {
            return item
          })
          this.tabLoading = false
        })
        .catch(() => {
          this.tabLoading = false
        })
    },
    // 带状态表格
    tableRowClassName({
      row
    }) {
      if (row.is_joined === 0) {
        return 'stop-row'
      }
      return ''
    }
  }
}
</script>
